import React, { useEffect, useMemo, useState } from 'react'
import { Card, Col, Row, Checkbox, Space, Input, message } from 'antd';
import { useParams } from 'react-router';
import { connect, useDispatch, useSelector } from "react-redux"
import calender from '../../../../assets/images/c日历.png'
import redCalender from '../../../../assets/images/e日历.png'
import { updateTitleAC, UpdateTodolistAC,addstepAC,delChildtaskAC,updateChildtaskAC,changeChildTitleAC } from '../../../../redux/actions'
import './item.css'
const { TextArea } = Input;
export default function Index(props) {
    const params = useParams()
    const state = useSelector(state => state.todoRC.todolist)
    const dispatch = useDispatch()
    const [farthstatus, setfarthstatus] = useState(false)//父复选框状态
    useEffect(() => {
        console.log('1', props.match.params);
        console.log('接收的参数', params);
        console.log(state);
        console.log(selectTask);
    }, [params])

    //选中的任务
    const selectTask = useMemo(() => {
        return state.filter(item => item.id == params.id)[0]
    }, [params])

    //选中复选框
    const onChange = e => {
        console.log('checked = ', e.target.checked);
        console.log('value:', e.target.value);
        setfarthstatus(e.target.checked)
        dispatch(UpdateTodolistAC(params.id))
    };

    //获得标题输入内容
    const getValue = (e) => {
        console.log(e.target.value);
        dispatch(updateTitleAC({ id: params.id, title: e.target.value }))
    }

    //添加步骤
    const getStep = (e) => {
        console.log('触发',e.target.value.split('\n'),e.target.value);
        let stepArray = e.target.value.split('\n')
        stepArray = stepArray.reverse()
        // if(stepArray.length==0){
        //     stepArray.push(e.target.value)
        // }
        let stepLength = selectTask.children.length+1
        let stepid =  selectTask.id+'-'+stepLength
        console.log('添加步骤id',stepid);
        console.log('stepArray',stepArray);

        //非会员条数少于5
        if(selectTask.children.length<5){
            dispatch(addstepAC({
                id: selectTask.id,
                step:{
                    id:stepid,
                    title:stepArray[0],
                    done:false
                }
            }))
        }else{
            message.error('开会员享有200条数')
        }

    }

    //获得选中的id
    const getItemId = id => {
        console.log('选中的id',id);
    }

    //选中的步骤
    const onChangestep = (e)=>{
        console.log('checked = ', e.target.checked);
        console.log('value:', e.target.value);
       if(e.target.checked){
        dispatch(updateChildtaskAC({
            id:selectTask.id,
            childid: e.target.value,
            done:true
        }))
       }else{
        dispatch(updateChildtaskAC({
            id:selectTask.id,
            childid: e.target.value,
            done:false
        })) 
       }
        const status = selectTask.children.every(item=>item.done)
        console.log('所有子状态',status);
        if(status) {
            setfarthstatus(status)
            dispatch(UpdateTodolistAC(params.id))
        }else{
            setfarthstatus(status)
        }
    }
    //删除
    const deleteChildtask=(id)=>{
            console.log('删除id',id);
            dispatch(delChildtaskAC({
                id:selectTask.id,
                childid:id
            }))
    }

    //改变细分任务
    const changeChild=(e)=>{
            console.log(e.target.value);
            const childid = e.target.getAttribute('data-id')
            console.log('childid',childid);
            dispatch(changeChildTitleAC({
                id:selectTask.id,
                childid,
                title:e.target.value
            }))
    }
    return (
        <div>
            <Card title={
                <div>
                    <Space style={{ display: 'flex', alignItems: 'center' }}>
                        <Checkbox onChange={onChange} checked={farthstatus} value={21212}></Checkbox><span style={{ color: 'rgb(243,243,243)' }}>|</span>
                        <Space style={{ cursor: 'pointer' }}>
                            {selectTask.oldTime ? <img style={{ width: '20px' }} src={redCalender} alt="" /> : <img style={{ width: '20px' }} src={calender} alt="" />}
                            {selectTask.createTime}
                        </Space>
                    </Space>
                </div>
            } bordered={false}>
              <div style={{height:'80vh', overflowY: 'auto'}}>
              <div>
                    {/* 修改标题 */}
                    <TextArea autoSize style={{ overflowY: 'visible' }} defaultValue={selectTask.title} value={selectTask.title} onChange={(e) => getValue(e)} bordered={false}></TextArea>
                </div>
                <TextArea allowClear onPressEnter={(e)=>{getStep(e)}} maxLength={20} autoSize placeholder={'描述'}  bordered={false}></TextArea>
                {
                   selectTask.children?selectTask.children.map(item => {
                        return (
                            <div className='itemhover2' style={{ width: '100%', height: '37px', display: 'flex', alignItems: "center", paddingLeft: '8px'}} key={item.id}>&nbsp;<Checkbox onChange={onChangestep} value={item.id}></Checkbox><div onClick={() => { getItemId(item.id) }} style={{ borderBottom: '1px solid rgb(243,243,243)', marginLeft: '5px', flexGrow: '1', height: '100%', lineHeight: '37px', paddingLeft: '3px' }}>
                                <Input defaultValue={item.title} bordered={false} data-id={item.id} value={item.title} onChange={(e)=>{changeChild(e)}} ></Input>
                            </div><span className='delete' onClick={()=>{deleteChildtask(item.id)}}>删除</span></div>
                        )
                    }):''
                }
              </div>
            </Card>
        </div>
    )
}
